<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="getDataList">
      <el-tab-pane label="安全检查台账" name="first"> </el-tab-pane>
      <el-tab-pane label="我的待办" name="second"> </el-tab-pane>
    </el-tabs>
    <div v-if="activeName == 'first'">
      <el-descriptions :column="15">
        <el-descriptions-item label="检查总数">{{
          tagData.dataTable.total
        }}</el-descriptions-item>
        <el-descriptions-item label="已闭合数">{{
          tagData.closedNum
        }}</el-descriptions-item>
        <el-descriptions-item label="未闭合数">{{
          tagData.unclosedNum
        }}</el-descriptions-item>
        <el-descriptions-item label="待整改数">{{
          tagData.toBeRectifiedNum
        }}</el-descriptions-item>
        <el-descriptions-item label="待复查数">{{
          tagData.toBeReviewedNum
        }}</el-descriptions-item>
        <el-descriptions-item label="超期未闭合数">{{
          tagData.overdueUnclosedNum
        }}</el-descriptions-item>
        <el-descriptions-item label="整改率"
          >{{ tagData.rectificationRate }}%</el-descriptions-item
        >
        <el-descriptions-item label="闭合率"
          >{{ tagData.closedRate }}%</el-descriptions-item
        >
      </el-descriptions>
      <el-form inline>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                @click="showFormItem = !showFormItem"
                >更多筛选条件</el-button
              >
            </el-form-item>
            <el-form-item label="检查日期:">
              <el-date-picker
                size="mini"
                v-model="queryParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQuery"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select
                size="mini"
                style="width: 160px"
                v-model="queryParams.hiddenTrouble"
                placeholder="隐患记录"
                @change="handleQuery"
              >
                <el-option
                  v-for="(item, index) in formList.hiddenTroubleList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-refresh-left"
                size="mini"
                @click="resetQuery"
              >
                重置
              </el-button>
            </el-form-item>
            <el-form-item style="margin-left: 650px">
              <el-button
                size="mini"
                type="primary"
                @click="$router.push({ name: 'ledgerAdd' })"
                :disabled="queryParams.projectId == null"
                >新增隐患记录</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="$router.push({ name: 'SupLedger' })"
                :disabled="queryParams.projectId == null"
                >补录</el-button
              >
            </el-form-item>
          </el-col>
          <el-col v-if="showFormItem">
            <el-form-item>
              <el-select
                style="width: 160px"
                v-model="queryParams.revisePeople"
                placeholder="整改人：全部"
                @change="handleQuery"
              >
                <el-option
                  v-for="item in formList.revisePeopleList"
                  :key="item.userId"
                  :value="item.userName"
                  :label="item.nickName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 160px"
                v-model="queryParams.checkPeople"
                placeholder="检查人：全部"
                @change="handleQuery"
              >
                <el-option
                  v-for="item in formList.revisePeopleList"
                  :key="item.userId"
                  :value="item.userName"
                  :label="item.nickName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 160px"
                v-model="queryParams.riskLevel"
                placeholder="风险等级：全部"
                @change="handleQuery"
              >
                <el-option
                  v-for="item in dict.type.list_risk_level"
                  :key="item.dictLabel"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 160px"
                v-model="queryParams.hiddenLevel"
                placeholder="隐患等级：全部"
                @change="handleQuery"
              >
                <el-option
                  v-for="item in dict.type.list_danger_level"
                  :key="item.dictLabel"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 160px"
                v-model="queryParams.hiddenDangerStatus"
                placeholder="检查结果：全部"
                @change="handleQuery"
              >
                <el-option
                  v-for="item in dict.type.biz_check_result"
                  :key="item.dictLabel"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <!-- <el-select
                size="mini"
                style="width: 160px"
                v-model="queryParams.dutyArea"
                placeholder="检查区域：全部"
              > -->
              <treeselect
                style="width: 160px; height:30px"
                :normalizer="normalizer"
                v-model="queryParams.dutyArea"
                :options="formList.dutyAreaList"
                :default-expand-level="100"
                placeholder="检查区域：全部"
              />
              <!-- </el-select> -->
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 160px"
                v-model="queryParams.checkType"
                placeholder="检查类型：全部"
                @change="handleQuery"
              >
                <el-option
                  v-for="dict in formList.checkTypeList"
                  :key="dict.id"
                  :label="dict.checkTypeName"
                  :value="dict.checkTypeNo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="activeName == 'second'">
      <el-button-group style="display: inline-block; margin-bottom: 20px">
        <el-button type="primary" :plain="plainA" @click="plainDataA"
          >待整改记录</el-button
        >
        <el-button type="primary" :plain="plainB" @click="plainDataB"
          >待复查记录</el-button
        >
        <!-- <el-button type="primary" :plain="plainC" @click="plainDataC"
          >待指派记录</el-button
        > -->
      </el-button-group>
    </div>

    <el-table :data="tableDataFirst" style="width: 100%" :key="activeName">
      <el-table-column prop="id" label="序号" align="center"> </el-table-column>

      <el-table-column
        prop="hiddenDangerStatus"
        label="检查结果"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.biz_check_result"
            :value="scope.row.hiddenDangerStatus"
            style="display: inline-block"
          />
          <el-tag
            type="warning"
            effect="dark"
            size="mini"
            color="red"
            v-if="scope.row.overdue == 1"
            >超期</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column
        prop="projectName"
        label="项目名称"
        align="center"
        v-if="activeName == 'second'"
        width="160"
      >
      </el-table-column>
      <el-table-column
        prop="checkPeople"
        label="检查人"
        align="center"
        v-if="activeName == 'second'"
        width="140"
      >
      </el-table-column>
      <el-table-column
        prop="checkPeople"
        label="检查人"
        align="left"
        width="200"
        v-if="activeName == 'first'"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.checkPeople }}</div>
          检查时间:{{ parseTime(scope.row.checkTime, "{y}-{m}-{d}") }}
        </template>
      </el-table-column>

      <el-table-column
        prop="hiddenTrouble"
        label="隐患信息"
        align="center"
        width="300"
      >
        <template slot-scope="scope">
          <el-tag
            type="warning"
            effect="dark"
            size="mini"
            v-if="scope.row.accidentHidden == 1"
            >一般</el-tag
          >
          <el-tag
            type="warning"
            effect="dark"
            size="mini"
            color="red"
            v-if="scope.row.accidentHidden == 2"
            >重大</el-tag
          >
          {{ scope.row.reviseRequire }}
          <div>
            <i
              class="el-icon-picture"
              style="
                background: rgb(235, 236, 240);
                padding: 5px;
                margin-right: 5px;
              "
            >
              {{ scope.row.pictureNum }}
            </i>
            <i
              class="el-icon-location-information"
              style="
                background: rgb(235, 236, 240);
                padding: 5px;
                margin-right: 5px;
              "
            >
              {{ scope.row.dutyArea }}
            </i>
            <i
              style="background: rgb(235, 236, 240); padding: 5px"
              v-if="scope.row.riskLevel"
            >
              {{ scope.row.riskLevel }}
            </i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="hiddenTrouble"
        label="隐患分类"
        align="center"
        v-if="activeName == 'first'"
      >
      </el-table-column>
      <el-table-column
        prop="bizSafeFineVOList"
        label="分包单位"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <!-- {{scope.row.scope.bizSafeFineVOList}} -->
          <div
            v-for="(item, index) in scope.row.bizSafeFineVOList"
            :key="index"
          >
            <el-tag
              type="warning"
              effect="dark"
              size="mini"
              color="red"
              v-if="item.fineCount != null"
              >罚</el-tag
            >
            {{ item.subpackageUnit }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="revisePeople"
        label="整改人"
        align="center"
        width="80"
        v-if="activeName == 'first'"
      >
      </el-table-column>
      <el-table-column
        prop="reviewUserName"
        label="复查人"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="checkType"
        label="检查类型"
        align="center"
        width="100"
        v-if="activeName == 'first'"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="innerVisibleOpen(scope.row)"> 查看 </el-button>
          <el-button
            type="text"
            v-if="queryParams.hiddenDangerStatus == 1"
            @click="
              $router.push({
                name: 'ReviewLedger',
                query: {
                  id: scope.row.id,
                  projectId: queryParams.projectId,
                  title: '整改',
                },
              })
            "
          >
            整改
          </el-button>
          <el-button
            type="text"
            v-if="queryParams.hiddenDangerStatus == 1"
            @click="handOver(scope.row)"
          >
            移交
          </el-button>
          <el-button
            type="text"
            v-if="queryParams.hiddenDangerStatus == 1 && scope.row.isApply != 0"
            @click="pickData(scope.row)"
          >
            延期申请
          </el-button>
          <el-button
            type="text"
            v-if="queryParams.hiddenDangerStatus == 2"
            @click="
              $router.push({
                name: 'ReviewLedger',
                query: {
                  id: scope.row.id,
                  projectId: queryParams.projectId,
                  title: '复查',
                },
              })
            "
          >
            复查
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :title="title"
      :close-on-click-modal="false"
      id="box"
    >
      <el-form
        ref="overForm"
        :model="overForm"
        label-width="200px"
        :rules="rules"
      >
        <el-form-item
          label="移交人"
          prop="removeUserName"
          v-if="title == '移交'"
        >
          <el-select
            v-model="overForm.removeUserName"
            placeholder="请选择移交人"
            style="width: 600px"
          >
            <el-option
              v-for="item in formList.handOverData"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
              <div style="float: left; margin-top: -6px">
                {{ item.nickName }}({{ item.deptName }})
              </div>
              <div
                style="
                  float: left;
                  display: block;
                  position: absolute;
                  margin-top: 10px;
                "
              >
                电话号码:{{ item.userPhone }}({{ item.projectLevel }})
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <div v-else>
          <el-form-item label="申请期限至" prop="extensionTime">
            <el-date-picker
              v-model="overForm.extensionTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              style="width: 400px"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="原整改时限" prop="formerTime">
            <span>{{ overForm.formerTime }}</span>
          </el-form-item>
          <el-form-item label="延期理由" prop="reason">
            <el-input
              type="textarea"
              :rows="4"
              v-model="overForm.reason"
              style="width: 400px"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitHand">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 查看 -->
    <DialogLook v-if="innerVisible" :lookRecordDataList="lookRecordDataList"></DialogLook>
  </div>
</template>

<script>
import {
  getListFirst,
  getRevisePeople,
  getDutyArea,
  getCheckType,
  handOverList,
  handOverSub,
  PickSub,
} from "@/api/biz/ledger/ledger";
import { mapState } from "vuex";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { lookRecordData,} from "@/api/biz/check/check";
export default {
  components: {
    Treeselect,
  },
  dicts: ["biz_check_result", "list_risk_level", "list_danger_level"],
  data() {
    return {
      firstData: "first",
      activeName: "first",
      form: {
        revisePeople: null, //整改人
        checkPeople: null, //检查人
        riskLevel: null, //风险等级
        hiddenLevel: null, //隐患等级
        hiddenDangerStatus: null, //检查结果
        dutyArea: null, //检查区域
        checkType: null, //检查类型
      },
      formList: {
        revisePeopleList: [], //整改人
        dutyAreaList: [],
        checkTypeList: [],
        hiddenTroubleList: [
          { value: "0", label: "隐患记录" },
          { value: "1", label: "排查记录" },
        ],
        handOverData: [],
      },
      // 搜索条件显示与隐藏
      showFormItem: false,
      // 安全检查台账表格数据
      tableDataFirst: null,
      // 待--记录
      plainA: false,
      plainB: true,
      plainC: true,
      // 我的待办表格
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: this.$store.state.app.selectData,
        hiddenTrouble: "0",
        loginName: null,
        revisePeople: null, //整改人
        checkPeople: null, //检查人
        riskLevel: null, //风险等级
        hiddenLevel: null, //隐患等级
        hiddenDangerStatus: null, //检查结果
        dutyArea: null, //检查区域
        checkType: null, //检查类型s
      },
      // 总条数
      total: 0,
      tagData: {
        dataTable: {
          total: null,
        },
        closedNum: null,
        unclosedNum: null,
        toBeRectifiedNum: null,
        toBeReviewedNum: null,
        overdueUnclosedNum: null,
        rectificationRate: null,
        closedRate: null,
        hiddenDangerStatus: null,
      },
      title: "",
      dialogVisible: false,
      overForm: {
        removeUserName: null,
        recordId: null,
        projectId: this.$store.state.app.selectData,
        reviseTheDates: null,
        replyUser: null,
        extensionTime: null,
      },
      rules: {
        removeUserName: [
          { required: true, message: "请选择移交人", trigger: "change" },
        ],
      },
      innerVisible:false,
      innerVisibleData:{
        bizProjectCheck: {
          checkTaskName: null,
        },
        bizProjectCheckRecord: {
          riskLevel: null,
          hiddenMessage: null,
          supplement: null,
          checkType: null,
          hiddenLevel: null,
          subpackageUnit: null,
          accidentHidden: null,
          revisePeople: null,
          notifier: null,
          reviseTheDates: null,
          reviseRequire: null,
          attachList:[]
        },
      },
      // 隐患详情
      lookRecordDataList: {
        bizProjectCheck: {
          checkTaskName: null,
        },
        bizProjectCheckRecord: {
          riskLevel: null,
          hiddenMessage: null,
          supplement: null,
          checkType: null,
          hiddenLevel: null,
          subpackageUnit: null,
          accidentHidden: null,
          revisePeople: null,
          notifier: null,
          reviseTheDates: null,
          reviseRequire: null,
          photo: null,
        },
      },
    };
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        console.log(oldVal);
        // if (oldVal.name == "ReviewLedger") {
        //   this.activeName = "second";
        // }
      },
      deep: true,
      immediate: true,
    },
    app: {
      handler(newVal, oldVal) {
        this.queryParams.projectId = newVal.selectData;
        this.overForm.projectId = newVal.selectData;
        this.getDataList();
      },
      deep: true,
    },
    "queryParams.dutyArea": "handleQuery",
  },
  methods: {
    normalizer(node) {
      return {
        ...node,
        label: node.name,
      };
    },
    //切换 tabs
    getDataList() {
      if (this.activeName == "second") {
        this.plainA = false;
        this.plainB = true;
        this.plainC = true;
        this.queryParams.loginName = "1";
        this.queryParams.hiddenDangerStatus = "1";
        this.queryParams.hiddenTrouble = null;
      } else {
        this.queryParams.loginName = null;
        this.queryParams.hiddenDangerStatus = null;
        this.queryParams.hiddenTrouble = "0";
      }
      getListFirst(this.queryParams).then((data) => {
        if (data.data.dataTable == null) {
          this.tableDataFirst = data.data.dataTable;
        } else {
          this.tableDataFirst = data.data.dataTable.rows;
          this.total = data.data.dataTable.total;
        }
        this.tagData = data.data;
      });
      if (this.queryParams.projectId != null) {
        //整改人
        getRevisePeople(this.queryParams).then((data) => {
          this.formList.revisePeopleList = data.rows;
        });
        getDutyArea(this.queryParams).then((response) => {
          this.formList.dutyAreaList = response.data;
        });
        getCheckType(this.queryParams).then((response) => {
          this.formList.checkTypeList = response.data;
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      getListFirst(this.queryParams).then((data) => {
        if (data.data.dataTable == null) {
          this.tableDataFirst = data.data.dataTable;
        } else {
          this.tableDataFirst = data.data.dataTable.rows;
          this.total = data.data.dataTable.total;
        }
        this.tagData = data.data;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        projectId: this.$store.state.app.selectData,
        hiddenTrouble: "0",
        loginName: null,
        revisePeople: null, //整改人
      };
      this.getDataList();
    },
    plainDataA() {
      this.plainA = false;
      this.plainB = true;
      this.plainC = true;
      this.getDataList();
    },
    plainDataB() {
      this.plainA = true;
      this.plainB = false;
      this.plainC = true;
      this.queryParams.hiddenDangerStatus = "2";
      getListFirst(this.queryParams).then((data) => {
        if (data.data.dataTable == null) {
          this.tableDataFirst = data.data.dataTable;
        } else {
          this.tableDataFirst = data.data.dataTable.rows;
          this.total = data.data.dataTable.total;
        }
        this.tagData = data.data;
      });
    },
    //移交
    handOver(row) {
      let data = {
        projectId: this.$store.state.app.selectData,
      };
      this.overForm.recordId = row.id;
      handOverList(data).then((data) => {
        this.formList.handOverData = data.data;
        this.dialogVisible = true;
        this.title = "移交";
      });
    },
    //延期
    pickData(data) {
      this.overForm.recordId = data.id;
      this.overForm.formerTime = data.reviseTheDates;
      this.dialogVisible = true;
      this.title = "延期申请";
    },
    //确定
    SubmitHand() {
      if (this.title == "延期申请") {
        let data = {
          ...this.overForm,
        };
        PickSub(data).then((data) => {
          if (data.code == 200) {
            this.$message({
              type: "success",
              message: "申请延期提交成功",
            });
            this.getDataList();
            this.dialogVisible = false;
          }
        });
      } else if (this.title == "移交") {
        this.$refs.overForm.validate((valid) => {
          this.formList.handOverData.forEach((item) => {
            if (item.userId == this.overForm.removeUserName) {
              this.overForm.removeUserName = item;
            }
          });
          let data = {
            operatorerPhone: this.overForm.removeUserName.userPhone,
            recordId: this.overForm.recordId,
            projectId: this.$store.state.app.selectData,
            operatorStatus: "5",
            operatorType: "3",
            removeUserName: this.overForm.removeUserName.userName,
          };
          handOverSub(data).then((data) => {
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "移交成功",
              });
              this.getDataList();
              this.dialogVisible = false;
            }
          });
        });
      }
    },
    //查看
    innerVisibleOpen(data){
      // getListFirst(err).then((data) => {
        
      // });
      // this.innerVisible = true;
      lookRecordData(data.id).then(({ data }) => {
        this.lookRecordDataList = data;
        this.lookRecordDataList.bizProjectCheckRecord.attachList.forEach(
          (item) => {
            item.name =
              process.env.VUE_APP_MINIO_BASE_API +
              "/" +
              item.bucket +
              "/" +
              item.name;
          }
        );
        this.lookRecordDataList.bizRectifyReviews.forEach((items) => {
          items.attachList.forEach((item) => {
            item.name =
              process.env.VUE_APP_MINIO_BASE_API +
              "/" +
              item.bucket +
              "/" +
              item.name;
          });
        });
      });
      this.innerVisible = true;
      // console.log(this.lookRecordDataList.bizProjectCheckRecord);
    }
  },

  computed: {
    ...mapState(["app"]),
  },

  created() {
    this.getDataList();
  },
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  height: 40px;
}
.treeselect-main {
  line-height: 28px;
  .vue-treeselect__placeholder {
    line-height: 28px;
  }
  .vue-treeselect__control {
    height: 22px !important;
  }
}
</style>
